<template>
  	<div class="about">
    	<img src="../assets/images/im.jpg" alt />
    	<div class="titles">
      		<p class="name">WOW SURPRISE 中国航天</p>
      		<div class="prices">￥16</div>
    	</div>
    	<img src="../assets/images/aboutbj.jpg" alt srcset />
    	<div class="tel">
      		<img src="../assets/images/telBg.png" alt srcset />
      		<div class="phone">
        		<input ref="phoneNumber" type="text" v-model="tel" placeholder="请输入手机号作为您的购票凭证" />
      		</div>
      		<div class="code">
        		<input type="text" v-model="code" placeholder="请输入验证码" />
        		<van-button size="mini" @click="send">发送验证码{{is_send?'('+num+')':''}}</van-button>
      		</div>
    	</div>
    	<footer @click="buy">￥16 立即购买</footer>
 	</div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
  	data() {
		return {
			tel: null,
			code: null,
			is_send: false,
			num: 60,
		};
  	},
  	methods: {
    	//立即购买
		buy() {
			this.$nextTick(() => {
				this.$refs.phoneNumber.focus();
			});
		},
    	//发送验证码
		send() {
			if (!this.is_send && this.num === 60) {
				this.is_send = true;
				this.sendCode()
				let now = setInterval(() => {
					this.num--;
					if (this.num < 1) {
						clearInterval(now);
						this.is_send = false;
						this.num = 60;
					}
				}, 1000);
			}
		},
		//获取验证码
		async sendCode(){
			console.log('发送验证码')
			//let res = await this.$http.get(this.$api.Index.index)
		},
		// 支付接口
    	async wxPayBefore() {
			this.loading = true
			let res = await this.$api.wxPayBefore({
				orderId: this.carInfo.id,
				couponId:this.carIndex
			})
			this.loading = false
			if (res) {
				if (res.status == 200) {
					let data = res.data
					if (data) {
						this.wexinPay(data,
							//成功回调函数
							res => {
							this.$toast('支付成功')
							this.carInfo.payAmount = true
							this.seeObject = getDate(new Date().getTime(), 'year')
							console.log(res, '---成功回调函数----')
							
							},
							//取消回调函数
							res => {
								// this.$toast('您取消了支付')
								console.log(res, '----取消回调函数---')
							},
							//失败回调函数
							res => {
								// this.$toast('支付失败')
								console.log(res, '----失败回调函数---')
							}
						)  
					}else{
						this.$toast('支付成功')
						this.carInfo.payAmount = true
						this.seeObject = getDate(new Date().getTime(), 'year')
					}
				}
			}
      	
      		console.log(res, '----------提交支付-----------')
    	},

    	// 调取微信支付
    	wexinPay(data, cb, cancel, fail) {
      		//获取后台传入的数据
			let appId = data.appId
			let timestamp = data.timeStamp
			let nonceStr = data.nonceStr
			let signature = data.signature
			let packages = data.package
			let paySign = data.paySign
			let signType = data.signType
			console.log('发起微信支付')
      		//下面要发起微信支付了
      		wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: appId, // 必填，公众号的唯一标识
				timestamp: timestamp, // 必填，生成签名的时间戳
				nonceStr: nonceStr, // 必填，生成签名的随机串
				signature: signature, // 必填，签名，见附录1
				jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			})
      		wx.ready(function() {
        		wx.chooseWXPay({
					timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
					package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
					signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
					paySign: paySign, // 支付签名
					success: function(res) {
            			// 支付成功后的回调函数
            			cb(res)
          			},
					cancel: function(res) {
						// 取消支付
					},
					fail: function(res) {
						// 支付失败
						//失败回调函数
						errorCb(res)
					}
        		})
      		})
			wx.error(function(res) {
				// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				/*alert("config信息验证失败");*/
			})
    	},
  	},
};
</script>
<style lang="scss" scoped>
	.about {
  		font-size: 0;
  		position: relative;
  		.titles {
    		text-align: left;
    		padding: 0 10%;
    		margin-bottom: 0.2rem;
    		.name {
      			font-size: 18px;
    		}
			.prices {
				font-size: 16px;
				font-weight: 600;
				line-height: 0.8rem;
				border-bottom: 1px solid #f7f7f7;
			}
  		}
		img {
			width: 100%;
		}
  		.tel {
			width: 7rem;
			position: absolute;
			left: calc(50% - 3.5rem);
			bottom: 2.5rem;
    		.phone,.code {
				width: 86%;
				margin: 10px auto;
				position: relative;
				z-index: 2;
				color: #fff;
    		}
    		.phone {
      			margin-top: 12px;
      			input {
					border-bottom: 1px solid #fff;
					width: 100%;
					height: 0.8rem;
					font-size: 14px;
      			}
    		}
    		.code {
      			display: flex;
      			justify-content: space-between;
      			input {
        			margin-right: 5px;
        			width: calc(100% - 2rem);
        			font-size: 14px;
     			}
				button {
					width: 2rem;
					line-height: 0.4rem;
					height: 0.6rem;
				}
    		}
			input {
				background-color: transparent;
				border: none;
			}
			img {
				position: absolute;
				left: 0;
				top: 0;
			}
  		}	
  		footer {
			width: 100%;
			font-size: 16px;
			font-weight: 600;
			padding: 0.12rem 0;
			background-color: #297cdb;
			color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
  		}
	}
</style>
